<template>
    <div class="out_box">
        <div class="content_box">
            <div class="title_box">
                <div class="title cl">
                    <h2 class="f_l">
                        账单明细
                    </h2>
                    <p class="date_box f_r">
                        <v-date-picker v-model="dataSearch.date1" show-time @change="changeDate1" placeholder="开始日期" format="yyyy/MM/dd" size="lg"></v-date-picker>
                        <i class="iconfont">&#xe600;</i>
                        <v-date-picker v-model="dataSearch.date2" show-time @change="changeDate2" placeholder="结束日期" format="yyyy/MM/dd" size="lg" :disabled-date="disabledDate"></v-date-picker>
                        <v-button class="ml_10" type="primary" size="large" @click="getData()">查询</v-button>
                    </p>
                </div>
                <div class="option_box cl">
                    <v-button class="download_excel" type="success" @click="downloadReport">
                        <i class="iconfont">&#xe625;</i> <span class="text">下载</span>
                    </v-button>
                    <div class="f_r">
                        <span class="title">币种</span>
                        <v-select class="select" :data="currencysList" v-model="dataSearch.currency"></v-select>
                        <span class="title ml_40">操作类型</span>
                        <v-select class="select" :data="options" v-model="dataSearch.billType"></v-select>
                    </div>
                </div>
            </div>
            <div class="content gray_table text_c gray_thead">
                <v-data-table :data='getData' :currentData='dataList.records' :columns='columnsData' stripe :emptyText="not_data">
                    <template slot="td" slot-scope="props">
                        <div v-if="props.column.field === 'sequence_number'">
                            <span>{{ (props.index + 1) + (dataList.current - 1) * 10 }}</span>
                        </div>
                        <div v-else-if="props.column.field === 'type'">
                            <span>交易账户</span>
                        </div>
                        <div v-else-if="props.column.field === 'msg'">
                            <span>可用</span>
                        </div>
                        <div v-else-if="props.column.field === 'money'">
                            <span>暂不显示</span>
                        </div>
                        <div v-else-if="props.column.field === 'cnumber'">
                            <span :class="props.content > 0 ? 'font_green' : 'font_orange'">{{ props.content + ' ' + props.item.currency }}</span>
                        </div>
                        <span v-else>{{ props.content }}</span>
                    </template>
                </v-data-table>
                <div class="pagination_box pr_20">
                    <v-pagination @change="changePage" :total="dataList.total" :show-total="showTotal" show-quick-jumper></v-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { getCurrencys } from '@doapis/currency/currency.js';
    import { getBillDetail } from '@doapis/personal/wallet.js';
    import { serverURL } from '@root/environment_variable.js';
    
    export default {
        name: "BillDetails",
        data: function() {
            return {
                currencysList: this.select_not_data,
                dataForm: {
                    value: '300',
                    password: '',
                    currency: '',
                    currencyName: '',
                    logo: '',
                },
                dataSearch: {
                    date1: '',
                    date2: '',
                    disabledDate: '',
                    billType: '',
                    currency: ''
                },
                dataList: {
                    current: 1,
                    records: [],
                    total: 0
                },
                columnsData:[
                    { title:"序号", field:'sequence_number', width: '11%' },
                    { title:"时间", field:'createTime', width: '11%' },
                    { title:"账户类型", field:'type', width: '8%' },
                    { title:"操作类型", field:'billType', width: '8%' },
                    { title:"操作单号", field:'id', width: '11%' },
                    { title:"操作金额", field:'cnumber', width: '14%' },
                    { title:"账户总额", field:'money', width: '8%' },
                    { title:"附加信息", field:'msg', width: '11%' },
                ],
                options: this.select_not_data
            }
        },
        computed: {
            userDATA: function() {
                const userDATA = this.$store.state.userDATA;
                return userDATA;
            }
        },
        methods: {
            getData: function(params) {
                const that = this;
                params = params || {};
                let sendData = this.getSearchData();
                sendData.current = that.dataList.current;
                
                return params.pageNo ? $.$getPromiseNullData() : getBillDetail(sendData).then(function(res) {
                    let data = res.data;
                    that.dataList = data.list;
                    that.options = data.params.data.map(function(item) {
                        return {
                            label: item.bill_type,
                            value: item.type
                        }
                    });
                });
            },
            getCurrencys: function() {
                const that = this;
                getCurrencys().then(function(res) {
                    let data = res.records.map(function(item) {
                        return {
                            label: item.currency,
                            value: item.currency
                        };
                    });
                    that.currencysList = data;
                });
            },
            // 下载报表
            downloadReport: function() {
                window.open(serverURL + '/transactionBill-grinok/transactionbill/export' + $.$o2q(this.getSearchData()));
            },
            // 更改开始时间
            changeDate1: function(date) {
                this.dataSearch.date1 = date;
                this.dataSearch.disabledDate = Date.parse(date);
            },
            // 更改结束时间
            changeDate2: function(date) {
                this.dataSearch.date2 = date;
            },
            // 设置禁用时间
            disabledDate: function(date){
                const disabledDate = this.dataSearch.disabledDate;
                return disabledDate && disabledDate > Date.parse(date);
            },
            changePage: function(val) {
                this.dataList.current = val;
                this.getData();
            },
            showTotal: function(val) {
                return '全部' + this.dataList.total + '条';
            },
            // 获取搜索和下载的条件
            getSearchData: function() {
                const that = this;
                const dataSearch = that.dataSearch;
                return {
                    currency: dataSearch.currency,
                    billType: dataSearch.billType,
                    startTime: dataSearch.date1,
                    endTime: dataSearch.date2,
                    memberid: that.userDATA.memberid
                };
            }
        },
        mounted: function() {
            this.getCurrencys();
            this.getData();
        }
    };
</script>

<style lang="less" scoped>
    @import '~@css/root.less';

    .content_box{
        background-color: white;
        .title_box{
            padding: 25px 20px;
        }
        .date_box{
            padding-top: 4px;
            .iconfont{
                display: inline-block;
                margin: 0 8px;
                vertical-align: middle;
                transform: rotateY(180deg);
            }
        }
        .option_box{
            margin-top: 24px;
            .download_excel{
                font-size: 13px;
                .iconfont, .text{
                    vertical-align: middle;
                }
            }
            .title{
                margin-right: 9px;
                font-size: 13px;
            }
            .select{
                width: 100px;
            }
        }
        .case_box{
            background-color: white;
            >.title .img{
                width: 26px;
                display: inline-block;
                vertical-align: sub;
            }
        }
        .content{
            padding-bottom: 20px;
            >.title{
                margin-top: 20px;
                font-size: 16px;
                color: @theme_color;
            }
            .desc{
                font-size: 10px;
                margin: 10px 0;
            }
        }
    }
</style>
